<template>
    <div class="absolute_wrap" style="top:0.05rem">
        <div class="select_class" :class="{padding_bottom:totalPrice}" style="background:#f6f6f6;height:100%;overflow:auto;" >
            <div class="row flex"  v-for="(item,index) in showData" >
                <!-- 取消下面注释就会开启批量支付 -->
                <!-- <div class="checkbox_wrap" v-if="patternStatus==2||patternStatus == 0" >
                    <checkbox v-model="item.checked"></checkbox>
                </div> -->
                <div class="radio_right" >
                    <div v-if="item.radioHeadPhoto" class="head">
                        <img  :src="$api.formatterImg(item.radioHeadPhoto)" />
                    </div>
                    
                    <div class="classroom">
                        <div class="className" v-if="item.className" >{{item.className}}</div>
                        <div class="className" v-if="item.patternName" >{{item.patternName}}</div>
                        <div class="teacher" v-if="item.endTime" >到期时间:{{new Date(item.endTime).Format('yyyy-MM-dd')}}</div>
                    </div>
                    <div class="right flex_column" style="flex-grow: 1" >
                            
                        <div class="price">
                            ￥{{item.patternPrice.toFixed(2)}}
                        </div>
                        <div class="pattern_status">
                            {{formatStatus(item.patternStatus)}}
                        </div>
                        <div class="button_wrap">
                            <mt-button v-if="item.patternStatus==2" type="danger" @click="toPay(index)"  size="small" >支付</mt-button>
                            <!-- <mt-button v-if="item.patternStatus==0" type="default" @click="cancelPay(index)"  size="small" >取消</mt-button> -->
                            <mt-button v-if="item.patternStatus==0" type="danger" @click="toPay(index)"  size="small" >去支付</mt-button>
                            <mt-button v-if="item.patternStatus==1&&!item.servicePatternCommenId" type="primary" @click="toSay(index)"  size="small" >去评价</mt-button>
                        </div>
                    </div>
                </div>                   
            </div> 
        </div>
        <div class="row footer flex" v-if="totalPrice" >
            <div class="left">
                共计:
                <span class="price">￥{{totalPrice}}</span>
            </div>
            <div class="right">
                <button class="topay" @click="toPay()">去支付</button>
            </div>
        </div>
        <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible">
        </mt-actionsheet>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    import checkbox from './checkbox'
    export default {
        name: "serviceList",
        data() {
            return {
                useInfo: {},
                showData: [],
                pageSize: 100000,
                pageNum: 1,
                payType: '', //用于存储支付类型
                pattern: {}, //用于存储支付的服务
                payState: 1, //用于判断单个支付还是合并支付
                actions: [{
                    name: '微信支付',
                    method: this.wxpay
                }, {
                    name: '支付宝支付',
                    method: this.zfbpay
                }],
                sheetVisible: false,
            };
        },
        computed: {
            totalPrice: function() {
                var total = 0
                this.showData.forEach(element => {
                    if (element.checked) {
                        total = total + parseFloat(element.patternPrice);
                    }
                })
                return total;
            },
            servicePatternIds: function() {
                var str = ''
                this.showData.forEach(element => {
                    if (element.checked) {
                        str = str + element.studentPatternId + ',';
                    }
                })
                return str;
            }
        },
        methods: {
            toPay(index) { //去支付
                if (index || index == 0) {
                    this.pattern = this.showData[index];
                    this.payState = 1;
                } else {
                    this.pattern = {};
                    this.payState = 2;
                }
                this.showPayPopup();
            },
            cancelPay() { //取消支付
                MessageBox('提示', '请联系管理员进行退班')
            },
            toSay(index) { //去评价
                sessionStorage.setItem('serviceDetail', JSON.stringify(this.showData[index]));
                this.$router.push({
                    path: 'topingjia'
                })
            },
            wxpay() { //微信支付
                this.payMoney(1);
            },
            payMoney(payType) { //payType 1是微信支付,2是支付宝支付
                var url = ''
                if (this.payState == 1) {
                    url = "/payLog/payOne"
                } else {
                    url = "/payLog/payMany"
                }
                var params = {
                    servicePatternId: this.pattern.studentPatternId,
                    servicePatternIds: this.servicePatternIds,
                    payType: payType,
                    userId: this.useInfo.userId,
                }
                this.$api.post(url, params, (data) => {
                    console.log('data', data);
                    this.$api.payMoney(data.info, payType, (obj) => {
                        MessageBox('提示', '操作成功');
                        this.getList();

                    })

                })

            },
            zfbpay() { //支付宝支付
                this.payMoney(2);
            },
            showPayPopup() { //显示支付宝或者微信选择弹窗
                this.sheetVisible = true;
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getList() {
                var url = '/servicePattern/selectVoPage'
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                    userId: this.useInfo.userId,
                    patternStatus: this.patternStatus,
                }
                this.$api.post(url, params, (data) => {
                    this.showData = data.info.list
                    console.log(JSON.parse(JSON.stringify(this.showData)));
                })
            },
            formatStatus(status) {
                switch (status) {
                    case 1:
                        return '已缴费';
                        break;
                    case 2:
                        return '已欠费';
                        break;
                    case 3:
                        return '支付待确认';
                        break;
                    case 0:
                        return '待支付';
                        break;
                }
            }
        },
        watch: {
            show(newV) {
                if (newV) {
                    this.getUserInfo();
                    this.getList();
                }
            }
        },
        props: ['patternStatus', 'show'],
        components: {
            checkbox,
        },
        created() {
            if (this.show) {
                this.getUserInfo();
                this.getList();
            }
        }
    }
</script>
<style scoped>
    .price {
        color: #FC5F51;
        text-align: right;
        font-size: 0.42333rem;
        padding-right: 0.13334rem;
        font-weight: bold;
    }
    
    .button_wrap {
        margin-top: 0.05rem;
        text-align: right;
    }
    
    .footer {
        height: 1.37333rem;
    }
    
    .select_class {
        padding: 0 0.34333rem;
    }
    
    .radio_right {
        height: 3rem;
        margin-top: 0.24666rem;
        margin-bottom: 0.1rem;
    }
    
    .padding_bottom {
        padding-bottom: 1.6rem;
    }
    
    .footer .left {
        font-size: 0.38666rem;
        width: 7.22666rem;
        font-weight: bold;
        color: #010101;
        height: 100%;
        text-align: right;
        padding-right: 0.88rem;
        line-height: 1.37333rem;
    }
    
    .footer .right {
        flex-grow: 1;
        height: 100%;
    }
    
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .pattern_status {
        text-align: right;
        color: #CC6600;
        font-size: 0.426333rem;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
    
    .classroom {
        padding-left: 0;
    }
    
    .topay {
        height: 100%;
        border: none;
        outline: none;
        font-size: 0.37333rem;
        color: white;
        background: #048Aff;
        width: 100%;
    }
</style>